<style lang="less"></style>
<template>
    <div class="search">
        <Card>
            <p slot="title">
                <span v-if="type == 0">新增请假申请</span>
                <span v-else-if="type == 1">编辑请假申请</span>
                <span v-else>查看请假申请详情</span>
            </p>
            <Row>
                <Form ref="form" :model="form" :label-width="110" :rules="formValidate" label-position="left" style="position: relative">
                    <FormItem label="请假申请人" prop="title" v-if="type != 0 && type != 1">{{ form.createBy }}</FormItem>
                    <FormItem label="请假类型" prop="type">
                        <dict dict="leave_type" v-model="form.type" style="width: 300px" />
                    </FormItem>
                    <FormItem label="标题" prop="title">
                        <Input v-model="form.title" style="width: 550px" />
                    </FormItem>
                    <FormItem label="原因" prop="description">
                        <Input type="textarea" v-model="form.description" :rows="5" placeholder="请输入详细情况" style="width: 550px" />
                    </FormItem>
                    <FormItem label="请假时间范围" required :error="errorMsg">
                        <DatePicker
                            v-model="selectDate"
                            :options="options"
                            type="datetimerange"
                            format="yyyy-MM-dd HH:mm"
                            clearable
                            @on-change="selectDateRange"
                            placeholder="选择起始时间"
                            style="width: 550px"
                        ></DatePicker>
                    </FormItem>
                    <FormItem label="请假时长">{{ form.duration }} 小时</FormItem>
                    <FormItem class="br">
                        <Button type="primary" :loading="submitLoading" @click="handelSubmit" v-if="type == 0 || type == 1">保存并关闭</Button>
                        <Button @click="handelPrint" v-if="type != 0" type="info">打印</Button>
                        <Button @click="handelCancel">关闭</Button>
                    </FormItem>
                    <Spin size="large" fix v-if="loading"></Spin>
                </Form>
            </Row>
        </Card>
    </div>
</template>

<script>
import dict from '@/views/my-components/xboot/dict';
import { getLeaveData, addLeave, updateLeave, applyLeave } from '@/api/activiti';
import printJS from 'print-js';
export default {
    name: 'leave-notcache',
    components: {
        dict
    },
    data() {
        return {
            type: 0,
            loading: false, // 表单加载状态
            modalVisible: false,
            selectDate: null,
            form: {
                // 添加或编辑表单对象初始化数据
                type: '',
                title: '',
                description: '',
                startDate: '',
                endDate: '',
                duration: 0
            },
            formValidate: {
                // 表单验证规则
                type: [{ required: true, message: '类型不能为空', trigger: 'change' }],
                title: [{ required: true, message: '标题不能为空', trigger: 'change' }],
                description: [{ required: true, message: '原因不能为空', trigger: 'change' }]
            },
            errorMsg: '',
            submitLoading: false, // 添加或编辑提交状态
            processList: [],
            backRoute: '',
            procDefId: '',
            options: {
                shortcuts: [
                    {
                        text: '1 天',
                        value() {
                            const end = new Date();
                            const start = new Date();
                            end.setTime(start.getTime());
                            return [start, end];
                        }
                    },
                    {
                        text: '2 天',
                        value() {
                            const end = new Date();
                            const start = new Date();
                            end.setTime(start.getTime() + 3600 * 1000 * 24 * 1);
                            return [start, end];
                        }
                    },
                    {
                        text: '3 天',
                        value() {
                            const end = new Date();
                            const start = new Date();
                            end.setTime(start.getTime() + 3600 * 1000 * 24 * 2);
                            return [start, end];
                        }
                    },
                    {
                        text: '1 周',
                        value() {
                            const end = new Date();
                            const start = new Date();
                            end.setTime(start.getTime() + 3600 * 1000 * 24 * 6);
                            return [start, end];
                        }
                    },
                    {
                        text: '1 个月',
                        value() {
                            const end = new Date();
                            const start = new Date();
                            end.setTime(start.getTime() + 3600 * 1000 * 24 * 29);
                            return [start, end];
                        }
                    }
                ]
            }
        };
    },
    methods: {
        init() {
            this.type = this.$route.query.type;
            this.backRoute = this.$route.query.backRoute;
            this.procDefId = this.$route.query.procDefId;

            if (this.type != 0) {
                this.form.id = this.$route.query.id;
                this.getData();
            } else {
                this.$refs.form.resetFields();
                this.selectDate = [];
            }
        },
        selectDateRange(v) {
            if (v[0]) {
                this.form.startDate = v[0];
                this.form.endDate = v[1];
                let date1 = this.stringToDate(this.form.startDate);
                let date2 = this.stringToDate(this.form.endDate);
                let date = date2.getTime() - date1.getTime();
                let hours = Math.round(date / (60 * 60 * 1000));
                this.form.duration = hours;
            } else {
                this.form.startDate = '';
                this.form.endDate = '';
                this.form.duration = 0;
            }
        },
        stringToDate(str) {
            let tempStrs = str.split(' ');
            let dateStrs = tempStrs[0].split('-');
            let year = parseInt(dateStrs[0], 10);
            let month = parseInt(dateStrs[1], 10) - 1;
            let day = parseInt(dateStrs[2], 10);
            let timeStrs = tempStrs[1].split(':');
            let hour = parseInt(timeStrs[0], 10);
            let minute = parseInt(timeStrs[1], 10);
            let date = new Date(year, month, day, hour, minute, 0);
            return date;
        },
        getData() {
            this.loading = true;
            getLeaveData(this.form.id).then(res => {
                this.loading = false;
                if (res.success) {
                    // 转换null为""
                    let v = res.result;
                    for (let attr in v) {
                        if (v[attr] == null) {
                            v[attr] = '';
                        }
                    }
                    let str = JSON.stringify(v);
                    let data = JSON.parse(str);
                    this.form = data;
                    this.selectDate = [];
                    this.selectDate[0] = data.startDate;
                    this.selectDate[1] = data.endDate;
                    this.customList2 = 'ROLE_ADMIN';
                }
            });
        },
        handelSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    if (!this.form.startDate) {
                        this.errorMsg = '请选择时间范围';
                        return;
                    } else {
                        this.errorMsg = '';
                    }
                    this.submitLoading = true;
                    if (this.type == 0) {
                        // 添加 避免编辑后传入id等数据 记得删除
                        delete this.form.id;
                        this.form.procDefId = this.procDefId;
                        addLeave(this.form).then(res => {
                            this.submitLoading = false;
                            if (res.success) {
                                this.$Message.success('操作成功');
                                this.closeCurrentPage();
                            }
                        });
                    } else if (this.type == 1) {
                        // 编辑
                        updateLeave(this.form).then(res => {
                            this.submitLoading = false;
                            if (res.success) {
                                this.$Message.success('操作成功');
                                this.closeCurrentPage();
                            }
                        });
                    }
                }
            });
        },
        handelPrint() {
            let data = [];
            let leave = this.form;
            data.push(leave);
            printJS({
                printable: data,
                type: 'json',
                header: '请假申请表',
                gridStyle: 'border: 1px solid lightgray; text-align:center',
                properties: [
                    { field: 'createBy', displayName: '申请人' },
                    { field: 'type', displayName: '请假类型' },
                    { field: 'title', displayName: '标题' },
                    { field: 'description', displayName: '原因' },
                    { field: 'startDate', displayName: '请假开始时间' },
                    { field: 'endDate', displayName: '请假结束时间' },
                    { field: 'duration', displayName: '持续时长（小时）' }
                ]
            });
        },
        handelCancel() {
            this.closeCurrentPage();
        },
        // 关闭当前页面
        closeCurrentPage() {
            this.$store.commit('removeTag', 'leave');
            sessionStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
            this.$router.push({
                name: this.backRoute
            });
        }
    },
    mounted() {
        this.init();
    },
    watch: {
        // 监听路由变化
        $route(to, from) {
            if (to.name == 'leave') {
                this.getDictData();
                this.type = this.$route.query.type;
                this.backRoute = this.$route.query.backRoute;
                this.procDefId = this.$route.query.procDefId;
                if (this.type != 0) {
                    this.form.id = this.$route.query.id;
                    this.getData();
                } else {
                    this.$refs.form.resetFields();
                    this.selectDate = [];
                }
            }
        }
    }
};
</script>
